// 跳转到注册页面
document.querySelector('.register').onclick = () => {
    location.href = './register.html'
}
// 跳转到登录页面
document.querySelector('.login').onclick = () => {
    location.href = './login.html'
}
// 将保存在localStorage中的用户名在页面上显示出来
let userinfo = JSON.parse(localStorage.getItem('userinfo'))
document.querySelector('.username').innerHTML = userinfo.name
// 渲染列表
function render(data) {
    let str = ''
    str += data.map((item) => {
        return `<tr>
                    <td class="active">${item.email}</td>
                    <td>${item.name}</td>
                    <td>${item.phone}</td>
                    <td>${item.group}</td>
                    <td>${item.isadmin ? '是' : '否'}</td>
                    <td>
                        <span class="${item.status ? 'status' : 'error'}">${item.status ? '正常' : '异常'}</span>
                    </td>
                    <td>
                        <span class="iconfont icon-bianji"></span>
                        <span class="iconfont icon-shanchu" data-phone="${item.phone}"></span>
                    </td>
                </tr>`
    }).join('')
    if (str == '') {
        str = `<tr>
                <td colspan="7" class="error-null">未能查询到相关数据</td>
            </tr>`
        document.querySelector('.page').innerHTML = 0 + '/' + 0
        document.querySelector('tbody').innerHTML = str
    } else {
        document.querySelector('tbody').innerHTML = str
        document.querySelector('.page').innerHTML = page + '/' + total
    }

}

// 渲染分页请求
// 获取上一页标签
let prev = document.querySelector('.prev')
// 获取下一页标签
let next = document.querySelector('.next')

let page = 1, total = 1
prev.disabled = true
renderAsk(page)
// 封装一个渲染列表请求
function renderAsk(page) {
    axios.get('/user/list', { params: { page: page, count: 3 } }).then((res) => {
        total = res.data.total
        render(res.data.list)
    })
}
// 封装一个模糊查询请求
function searchAsk(page) {
    axios.get('/user/search', { params: { searchkey: searchInput.value, page: page, count: 3 } }).then((res) => {
        total = res.data.total
        render(res.data.list)
    })
}

// 点击上一页
prev.onclick = () => {
    next.disabled = false
    if (page > 1) {
        renderAsk(--page)
        if (page == 1) {
            prev.disabled = true
        }
    }
}
// 点击下一页
next.onclick = () => {
    prev.disabled = false
    if (page < total) {
        renderAsk(++page)
        if (page == total) {
            next.disabled = true
        }
    }
}

// 模糊查询
// 获取搜索框标签
let searchInput = document.querySelector('.find input')
document.querySelector('.find button').onclick = () => {
    page = 1
    prev.disabled = true
    next.disabled=false
    searchAsk(page)
    // 点击上一页
    prev.onclick = () => {
        next.disabled = false
        if (page > 1) {
            searchAsk(--page)
            if (page == 1) {
                prev.disabled = true
            }
        }
    }
    // 点击下一页
    next.onclick = () => {
        prev.disabled = false
        if (page < total) {
            searchAsk(++page)
            if (page == total) {
                next.disabled = true
            }
        }
    }
}

// 删除操作
// 事件委托
document.querySelector('tbody').onclick=(e)=>{
    if (e.target.classList.contains('icon-shanchu')) {
        axios.post('/user/delete',{phone:e.target.dataset.phone}).then((res)=>{
            renderAsk(page)
        })
    }
}


